<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>


	<script type="text/javascript">
	 var moudleArray=new Array();//申明全局变量，用来存放已授权的模块数据
	 var currentId=null;//选中的Id
	 var removeId=null;
	 var fromId=null;
	 $(document).ready(function(){
		 //增加隔行变色效果
   	     $(".listtable").zebra();
	 });
	  //改变当前选中的样式
	  function changeCurentCss(obj){
		  currentId=$(obj).attr('id');
		  $("#role_all_moudledivId").find($("div").each(function(index,currObj){
	    	  $(currObj).css({"backgroundColor":""});
	      }));
		  $(obj).css({"backgroundColor":"#cce2f7"});
	  }
	  //改变左移选中的样式
	  function changeRemoveCss(obj){
		  removeId=$(obj).attr('count');
		  fromId = $(obj).attr('fromId');
		  $("#role_newlimit_allmoudledivId").find($("div").each(function(index,currObj){
	    	  $(currObj).css({"backgroundColor":""});
	      }));
		  $(obj).css({"backgroundColor":"#cce2f7"});
	  }
	  //右移或左移模块数据
	  function addOrRemoveModule(idx){
		  $("#role_new_limit_allmoudledivId").empty();
		  if(idx==1){//右移数据
			if(null!=currentId){
				var obj=$("#"+currentId);//获取选中的对象
				obj.hide();//隐藏左边数据
				var moudleid=obj.attr("moudleid");
				var moudlename=obj.attr("moudlename");
			    var tempStr='{"id":"'+moudleid+'","name":"'+moudlename+'","fromid":"'+currentId+'"}';
			    moudleArray.push(tempStr);
			    currentId=null;//清空对象值
			}
		  }else{//左移数据
			  if(null!=removeId){
				  $("#"+fromId).show();//显示对象
				  moudleArray.splice(removeId,1);
				  removeId=null;//清空对象值
			  }
		  }
		  var str=""
		  for(var ifx=0;ifx<moudleArray.length;ifx++){
			  var jsonList=eval("("+moudleArray[ifx]+")");
			  str+="<div id='role_to_"+ifx+"'  fromId='"+jsonList.fromid+"' count='"+ifx+"' title='"+jsonList.name+"'  moudleid='"+jsonList.id+"' onclick='changeRemoveCss(this)' style='height:15px;width:188px;text-align:center;float:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;margin-bottom:2px;'>";
			  str+=jsonList.name
		      str+="</div>";
			  
		  }
		 $("#role_new_limit_allmoudledivId").html(str);
	  }
	  /*ArrayList去除重复数据*/
      function reMoveArray(arr){
    	 var rs = new Array();
    	 for(var i=0;i<arr.length;i++){
    	 var s = ","+rs.join(",")+",";
	    	 if(!s.match(","+arr[i]+","))
		     {
	    	  rs.push(arr[i]);
	    	 } 
    	 }
    	 return rs;
	 }
	  //获取已授权功能模块Id
	  function getLimitMoudle(){
		  var str="";
		  for(var ifx=0;ifx<moudleArray.length;ifx++){
			  var jsonList=eval("("+moudleArray[ifx]+")");
			  str+=jsonList.id+"@@";
		  }
		  return str;
	  }
	</script>
	<form id="framework_new_moudle_dirstrmoudleform" method="post">
	   <table border="0" cellpadding="0" cellspacing="0" height="100%"  width="100%" class="listtable">
	    <tr>
	       <td colspan="3" valign="top" width="100%">
	           <table border="0" width="100%" >
					<tr>
						<td width="20%" height="40px" style="text-align:left">&nbsp;<span style="color:red;font-size:15px">*</span>角色名称：&nbsp;</td>
						<td width="80%" height="40px">
							<input id="framework_rolename" type="text" name="rolename" style="width:60%" class="easyui-validatebox" data-options="required:true,missingMessage:'角色名称必须填写', validType:'specialCharFilter'" />
							<span id="framework_moudle_add_validrolename" style="color:red"></span>
						</td>
					</tr>
					<tr>
						<td height="40px" style="text-align:left">&nbsp;&nbsp;角色描述：&nbsp;</td>
						<td height="68px" colspan="3">
							<textarea id="framework_roledescinfo" name="descinfo" class="easyui-validatebox" data-options="required:false,validType:['specialCharFilter', 'length[0,30]']" style="width:87%;height:60px;"></textarea>
						</td>
			        </tr>
	           </table>
	       </td>
	    </tr>
	    <tr>
	       <td style="width:45%;"><div style="text-align:center;margin-top:10px;margin-bottom:5px;">未授权功能模块</div></td>
	       <td style="width:10%"></td>
	       <td style="width:45%"><div style="text-align:center;margin-top:10px;margin-bottom:5px;">已授权功能模块</div></td>
	    </tr>
	    <tr>
	       <td valign="top">
	         <div id="role_allmoudledivId" style="overflow:hidden;overflow-y:auto;height:180px;border:#cbcbcb solid 1px;margin-left:5px;;margin-bottom:5px;text-align:center">
	            <c:forEach items="${moudleList}" var="moudle" varStatus="g" step="1">
	              <div id="role_from_${g.count}" title="${moudle.moudlename}" moudleid="${moudle.moudleid}" moudlename="${moudle.moudlename}" onclick="changeCurentCss(this)" style="height:15px;width:188px;text-align:center;float:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;margin-bottom:2px;">${moudle.moudlename}</div>
	            </c:forEach>
	         </div>
	       </td>
	       <td valign="middle" style="text-align:center">
	          <img alt="右移" title="右移" onclick="addOrRemoveModule(1)"  src="${pageContext.request.contextPath}/images/icons/more_hover.png"  style="width:16px;height:14px;margin-lef:5px;margin-right:5px;margin-bottom:50px;border:1px solid #cbcbcb;"/></br>
	          <img alt="左移" title="左移" onclick="addOrRemoveModule(2)"  src="${pageContext.request.contextPath}/images/icons/more_normal.png"  style="width:16px;height:14px;margin-lef:5px;margin-right:5px;border:1px solid #cbcbcb;"/>
	       </td>
	       <td>
             <div id="role_new_limit_allmoudledivId" style="overflow:hidden;overflow-y:auto;height:180px;border:#cbcbcb solid 1px;margin-left:5px;;margin-bottom:5px;margin-right:5px;text-align:center">
             </div>
 	       </td>
	    </tr>
	   </table>
	</form>